<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak],[v-pre],[v-once]{
            display: none;
        }
    </style>
    <script src="./js/vue.js"></script>
</head>

<body>
    <input type="button" value="测试" disabled>
    <hr>
    <div id="app" v-cloak>
        <!--
        3、v-pre
            - 取值：不需要表达式，该指令为boolean类型属性
            - 写表示 true（启用功能） 不写表示 false（不启用功能）
            - 功能：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
            - 示例：<span v-pre>{{ 该语法会直接显示在页面 }}</span>
        -->
        <h3 v-pre>
            vue的插值表达式 {{ msg }}
            <div v-html=" 测试数据 ">v-html定义</div>
        </h3>
        <hr>
        <!--
        4、v-once
            - 取值：不需要表达式，该指令为boolean类型属性
            - 写表示 true（启用功能） 不写表示 false（不启用功能）
            - 功能：对当前元素和内部元素vue功能执行一次，程序执行过程不在对该元素范围内的vue功能进行重新执行
            - 示例：<span v-once>该区域vue功能只在初始化时执行一次 {{msg}}</span>
            
            !!Tip:v-once 在项目开发常用于在页面第一次加载时初始化数据，然后关闭响应式数据功能
        -->
        <h3>
            <p>info:{{ info }}</p>
            <p v-text=" info "></p>
        </h3>
        <h3 v-once>
            <p>info:{{ info }}</p>
            <p v-text=" info "></p>
        </h3>
        <!--
        5、v-cloak
            - 取值：不需要表达式，该指令为boolean类型属性
            - 功能：实现在vue功能构建完成前，隐藏浏览上vue语法表达式，该指令本身不具有特殊功能，需配合css样式实现效果
            - 示例：
                [v-cloak] {
                    display: none;
                }
                <div v-cloak>
                    {{ message }}
                </div>
            Tips：v-cloak指令功能主要利用了 指令特性 + css 样式实现，因此所有的vue指令都可以实现该功能
        -->
        <hr>
        <h3 v-cloak>v-cloak-info:{{ info }}</h3>
    </div>
</body>
<script>
    setTimeout(function(){
        // 模拟网络延迟的问题

        new Vue({
            el: "#app",
            data:{
                info:"info初始化数据"
            }
        })

    },4000)
</script>

</html>